<template>
    <div id="ViewQuestionView">
        <a-row gutter="[24,24]">
            <a-col :md="12" :xs="24">
                <a-tabs default-active-key="question">
                    <a-tab-pane key="question" title="问题">
                        <a-card v-if="question" :title="question.title">
                            <template #extra>
                                <a-space wrap>
                                    <a-tag
                                        v-for="(tag, index) of question.tags"
                                        :key="index"
                                        color="green"
                                    >
                                        {{ tag }}</a-tag
                                    >
                                </a-space>
                            </template>
                            <a-descriptions
                                title="判题条件"
                                :column="{ xs: 1, md: 2, lg: 3 }"
                            >
                                <a-descriptions-item label="时间限制">
                                    {{ question.judgeConfig.timeLimit ?? 0 }}
                                </a-descriptions-item>
                                <a-descriptions-item label="内存限制">
                                    {{ question.judgeConfig.memoryLimit ?? 0 }}
                                </a-descriptions-item>
                                <a-descriptions-item label="堆栈限制">
                                    {{ question.judgeConfig.stackLimit ?? 0 }}
                                </a-descriptions-item>
                            </a-descriptions>
                            <MdViewer :value="question.content || ''" />
                        </a-card>
                    </a-tab-pane>
                    <a-tab-pane key="comment" title="评论"> 评论区 </a-tab-pane>
                    <a-tab-pane key="answer" title="答案">
                        暂时无法查看答案
                    </a-tab-pane>
                </a-tabs>
            </a-col>
            <a-col :md="12" :xs="24">
                <a-form :model="form" layout="inline">
                    <a-form-item field="language" label="选择语言">
                        <a-select
                            v-model="form.language"
                            :style="{ width: '320px' }"
                            placeholder="Please select ..."
                        >
                            <a-option>java</a-option>
                            <a-option>cpp</a-option>
                            <a-option>go</a-option>
                        </a-select>
                    </a-form-item>
                </a-form>
                <CodeEditor
                    :value="form.code"
                    :language="form.language"
                    :handleChange="onChange"
                />
                <a-divider />
                <a-button
                    type="primary"
                    style="min-width: 200px"
                    @click="doSubmit"
                    >提交代码</a-button
                >
            </a-col>
        </a-row>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, withDefaults } from "vue";
import {
    Question,
    QuestionControllerService,
    QuestionSubmitAddRequest,
    QuestionVO,
} from "../../../generated";
import message from "@arco-design/web-vue/es/message";
import { useRouter } from "vue-router";
import CodeEditor from "@/components/CodeEditor.vue";
import MdViewer from "@/components/MdViewer.vue";
import { QuestionSubmitControllerService } from "../../../generated/services/QuestionSubmitControllerService";

const router = useRouter();

const question = ref<QuestionVO>();

//先执行page.value然后再执行...展开运算符
interface Props {
    id: string;
}

const props = withDefaults(defineProps<Props>(), {
    id: () => "",
});
const toQuestionPage = (record: Question) => {
    router.push({
        path: `/view/question/${record.id}`,
        params: { id: record.id },
    });
};

const loadData = async () => {
    let res = await QuestionControllerService.getQuestionVoByIdUsingGet(
        props.id as any
    );
    console.log(res);
    if (res.code === 0) {
        question.value = res.data;
    } else {
        message.error("加载失败" + res.message);
    }
};

onMounted(() => {
    loadData();
});
const form = ref<QuestionSubmitAddRequest>({
    questionId: props.id as any,
    language: "java",
    code: `import java.io.*;
import java.util.*;

public class Main
{
    public static void main(String args[]) throws Exception
    {
        //在此填写代码
    }
}`,
});
const doSubmit = async () => {
    const res = await QuestionSubmitControllerService.doQuestionSubmitUsingPost(
        form.value
    );
    if (res.code === 0) {
        message.success("提交代码成功");
    } else {
        message.error("提交失败");
    }
};

const onChange = (v: string) => {
    form.value.code = v;
};
</script>

<style scoped>
#manageQuestionView {
}
</style>
